<template>
  <el-dialog
    title="题库配置"
    width="50%"
    :visible.sync="open"
    :before-close="close"
    :append-to-body="true"
  >
    <el-steps :active="active" finish-status="success" simple>
      <el-step title="标签选择"/>
      <el-step title="题目配置"/>
    </el-steps>

    <div style="padding: 20px">
      <div v-if="active === 0">
        <el-checkbox-group v-model="checkedTagIds">
          <el-checkbox @change="(e) => tagChange(e, tag)" style="margin: 5px 10px" v-for="(tag, index) in tags"
                       :key="index" :label="tag.id">
            <el-tag>{{ tag.tagName }}</el-tag>
          </el-checkbox>
        </el-checkbox-group>
      </div>

      <div v-if="active === 1" style="height: 90%; overflow-y: auto">
        <div>
          <div style="display: flex; align-items: center; height: 10%">
            <span style="font-size: 16px">规则配置</span>
            <el-dropdown style="margin-left: 20px" @command="addConfig">
              <el-button type="text" class="el-dropdown-link">
                添加配置<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :disabled="options.filter(a => a.type === dict.value).length > 0"
                                  v-for="(dict, index) in dict.type.exam_question_type" :key="index" :command="dict">
                  {{ dict.label }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div style="height: 90%; overflow-y: auto">
            <el-form v-show="options.length > 0" style="margin: 10px 0" :data="form" label-position="left"
                     label-width="80px" size="mini">
              <el-form-item label="总分">
                <el-input-number disabled v-model="form.fraction" :precision="1" :min="0" size="mini"/>
              </el-form-item>
              <el-form-item label="合格分数">
                <el-input-number v-model="form.passFraction" :precision="1" :min="0" :max="form.fraction" size="mini"/>
              </el-form-item>
            </el-form>
            <el-card v-for="(o,i) in options" :key="i" style="margin-bottom: 10px">
              <template slot="header">
                <div style="display: flex; justify-content: space-between; align-items: center">
                  <div>{{ o.typeDesc }}</div>
                  <div>
                    <el-link @click="removeConfig(i)" icon="el-icon-remove" :underline="false">移除</el-link>
                  </div>
                </div>
              </template>
              <div>
                <span>分值：</span>
                <el-input-number v-model="o.score" :precision="2" :step="0.1" :max="100"/>
              </div>
              <el-divider/>
              <div>
                <div v-for="(t, index) in o.tags" :key="index" style="margin: 10px 0">
                  <el-tag>{{ t.tagName }}</el-tag>
                  <span style="margin-left: 5px">共{{ t.totalNum }}题</span>
                  <span v-show="t.totalNum !== 0">，配置
                  <el-input-number style="margin: 0 5px" size="mini" v-model="t.num" :step="1" :max="t.totalNum"/>
                  题</span>
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </div>

      <div v-if="active === 2">
      </div>
    </div>

    <div style="text-align: right">
      <el-button type="primary" @click="previous" plain>{{ active === 0 ? '取消' : '上一步' }}</el-button>
      <el-button :disabled="checkedTags.length === 0" type="primary" @click="next">{{
          active === 1 ? '完成' : '下一步'
        }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>

import {getTagQuestionNum} from "@/api/edu/trainPlan";

export default {
  name: 'library',
  dicts: ['exam_question_type'],
  props: {
    open: {
      type: Boolean,
      default: false
    },
    close: {
      type: Function,
      default: () => {
      }
    },
    tags: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      active: 0,
      checkedTagIds: [],
      checkedTags: [],
      form: {
        fraction: 0,
        passFraction: 0
      },
      options: []
    }
  },
  watch: {
    options: {
      handler() {
        this.form.fraction = 0
        this.options.forEach(o => {
          let num = 0
          o.tags.forEach(t => {
            num += t.num
          })
          this.form.fraction += (o.score * num)
        })
      },
      deep: true
    }
  },
  methods: {
    tagChange(b, tag) {
      tag.totalNum = 20
      tag.num = 1
      if (b) {
        this.checkedTags.push(tag)
      } else {
        this.checkedTags.forEach((c, index) => {
          if (c.id === tag.id) {
            this.checkedTags.splice(index, 1)
          }
        })
      }
    },
    addConfig(dict) {
      let tag = {
        type: dict.value,
        typeDesc: dict.label,
        score: 1.0,
        tags: []
      }
      this.checkedTags.forEach(c => {
        getTagQuestionNum(c.id, dict.value).then(res => {
          tag.tags.push({
            ...c,
            num: res.data === 0 ? 0 : 1,
            totalNum: res.data
          })
        })
      })
      this.options.push(tag)
    },
    removeConfig(index) {
      this.options.splice(index, 1)
    },
    previous() {
      if (this.active === 0) {
        this.close()
      } else {
        if (this.active === 1) {
          this.options = []
        }
        this.active--
      }
    },
    next() {
      if (this.active === 1) {
        if (this.options.length === 0) {
          this.$message.error("请选择至少一种题型")
        } else {
          let totalNum = 0
          this.options.forEach(o => {
            let num = 0
            o.tags.forEach(t => {
              totalNum += t.num
              num += t.num
            })
            o.totalNum = num
          })
          if (totalNum < 10) {
            this.$message.error("请配置至少10道题目")
          } else {
            this.form.options = this.options
            this.$emit('submit', this.form)
          }
        }
      } else {
        this.active++
      }
    }
  }
}
</script>

<style scoped>

</style>
